<%@ page import="com.google.appengine.api.blobstore.BlobstoreServiceFactory" %>
<%@ page import="com.google.appengine.api.blobstore.BlobstoreService" %>

<%
    BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="css/dndUpload.css" type="text/css" media="screen"/>
    <script src="http://www.google.com/jsapi?key=ABQIAAAADYbHHQrNWPElNtE4hn2g1hQhn5tTlmnhbGVHENfXgw8ik0kvARSWpfuAdtdt1KqinQpUokxB7SpcsQ"
        type="text/javascript"></script>
    <script type="text/javascript">
        google.load("jquery", "1");
        google.load("jqueryui", "1");
    </script>
    <script type="text/javascript">
    	
    	var totalFiles = new Array();
    	
        $(document).ready(function () {
            var dropbox = document;
            
            //init event handlers
            dropbox.addEventListener("dragenter", dragEnter, false);
            dropbox.addEventListener("dragexit", dragExit, false);
            dropbox.addEventListener("dragover", dragOver, false);
            dropbox.addEventListener("drop", drop, false);
            dropbox.addEventListener("progress", progress, false);
        });
        
        function dragEnter(evt) {
            evt.stopPropagation();
            evt.preventDefault();
        }
        function dragExit(evt) {
            evt.stopPropagation();
            evt.preventDefault();
        }
        function dragOver(evt) {
            evt.stopPropagation();
            evt.preventDefault();
        }
        
        function drop(evt) {
        	evt.stopPropagation();
            evt.preventDefault();
			
            document.getElementById("droplabel").style.display = 'none';
            
            // create an array with all the files with this drop
            var files = evt.dataTransfer.files;

            // perform an action on each file individually
            for (var i = 0, f; f = files[i]; i++) {
				
            	if (f.type.match('image.*')) {
	                // setup a reader to display each file
	                var reader = new FileReader();
	
	                reader.onload = (function (theFile) {
	                    return function (e) {
	                    	var url = null;
	                        var span = document.createElement('span');
	                     	// edit file name
	    	            	var name = theFile.name;
	    	            	var split = name.split(" ");
	    	            	var join = split.join("");
	                        span.id = join;
	                        var imgTag = "<img class='thumbnail' src='" + e.target.result + "' title='" + theFile.name + "' />";
	                        span.innerHTML = imgTag + "<div style='overflow-x: hidden;'><div class='desc' style='margin-top: 10px;'>Name:" + theFile.name + "</div><div class='desc'>Media Type: " + theFile.type + "</div></div>" +
	                        "<div class='status'>Status: Pending...</div>" +
	                        "<img class='loader' src='images/bar-loader.gif' />" +
	                        "<div class='fileOption'><button onclick=removeFile('"+ span.id +"')>x</button></div>";
	                        document.getElementById('output').insertBefore(span, null);
	                    };
	                })(f);
	
	                reader.readAsDataURL(f);
            	} else {
	            	if (f.type.match('video.*')) {
	            		var imgTag = "<img class='thumbnail' src='images/video.png' title='" + f.name + "' />";
	            	} else if (f.type.match('audio.*')) {
	            		var imgTag = "<img class='thumbnail' src='images/audio.png' title='" + f.name + "' />";
	            	} else {
	            		var imgTag = "<img class='thumbnail' src='images/doc.png' title='" + f.name + "' />";
	            	}
	            	var url = null;
	            	var span = document.createElement('span');
	            	// edit file name
	            	var name = f.name;
	            	var split = name.split(" ");
	            	var join = split.join("");
            		span.id = join;
                    span.innerHTML = imgTag + "<div style='overflow-x: hidden;'><div class='desc' style='margin-top: 10px;'>Name:" + f.name + "</div><div class='desc'>Media Type: " + f.type + "</div></div>" +
                    "<div class='status'>Status: Pending...</div>" +
                    "<img class='loader' src='images/bar-loader.gif' />" +
                    "<div class='fileOption'><button onclick=removeFile('"+ span.id +"')>x</button></div>";
                    document.getElementById('output').insertBefore(span, null);
            	}
                totalFiles.push(f);
            }
        }
        
        function loadXMLDoc(file, url, id) {
        	if (document.getElementById(id) != null) {
	        	var list = document.getElementById(id).childNodes;
	        	list.item(3).style.display = "inline";
		        var xmlhttp = null; //= new XMLHttpRequest();
		        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
		        	xmlhttp=new XMLHttpRequest();
		        } else {// code for IE6, IE5
		        	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		        }
				
		        xmlhttp.onreadystatechange = function () {
		            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
		                document.getElementById(id).innerHTML = xmlhttp.responseText;
		                updateList();
		            }
		        }
		        var formData = new FormData();
		        formData.append("fileName", file);
		        formData.append("mediaName", file.name);
		        formData.append("folder", document.getElementById("txtFolder").value);
    	        if (url != null) {
    	        	url = null;
    	        }
		        url = "<%= blobstoreService.createUploadUrl("/uploadAudio") %>";
		        xmlhttp.open("POST", url, true);
		        xmlhttp.send(formData);
        	} else {
        		
        	}
	        
        }
        
        function updateList() {
        	var xmlhttp = new XMLHttpRequest();
	        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
	        	xmlhttp=new XMLHttpRequest();
	        } else {// code for IE6, IE5
	        	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	        }
			
	        xmlhttp.onreadystatechange = function () {
	            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
	                document.getElementById("listID").innerHTML = xmlhttp.responseText;
	            }
	        }
	        
	        xmlhttp.open("GET", "fileList.jsp", true);
	        xmlhttp.send();
        }
        
        function upload() {
        	for(var i=0; i < totalFiles.length; i++) {
        		var file = totalFiles[i];
        		var url = null;
        		var name = file.name;
            	var split = name.split(" ");
            	var id = split.join("");
        		loadXMLDoc(file, url, id);
        	}
        }
        function removeFile(id) {
        	// edit file name
        	var name = id;
        	var split = name.split(" ");
        	var join = split.join("");
        	document.getElementById("output").removeChild(document.getElementById(join));
        	var i = 0;
        	while (i < totalFiles.length && id != totalFiles[i].name) {
        		i++;
        	}
        	var temp = totalFiles[0];
        	totalFiles[0] = totalFiles[i];
        	totalFiles[i] = temp;
        	// remove the file
        	totalFiles.shift();
        }
        function removeAll() {
        	while (totalFiles.length > 0) {
        		var file = totalFiles[0];
        		removeFile(file.name);
        	}
        }
    </script>
</head>
<body>
    <div id="dropbox">
    	<div id="buttonPanel">
    		<button id="btnUpload" onclick="upload()">UPLOAD ALL</button>
    		<button id="btnClear" onclick="removeAll()">REMOVE ALL</button>
    		<div style="float: right; margin: 5px 8px; font-size: large;">Album/Collection: <input type="text" id="txtFolder" name="folder" placeholder="Unknown" /></div>
    	</div>
        <div id="output">
        	<h1 id="droplabel">Drop files here...</h1>
        </div>
    </div>
</body>
</html>